<template>
  <el-card class="box-card">
    <!-- <div slot="header" class="clearfix">
      <el-input v-model.trim="search" style="width:400px" placeholder="输入关键字查询" />
    </div> -->
    <el-table ref="commonPickerTable" v-loading="commonPickerLoading" :data="data" :show-header="false" max-height="300px" highlight-current-row @row-click="handleClickTableRow" @select="handleSelect">
      <el-table-column type="selection" width="50" />
      <slot />
    </el-table>
  </el-card>
</template>

<script>
export default {
  name: 'CommonTablePicker',
  props: {
    data: {
      type: Function,
      required: true
    }
  },
  data() {
    return {
      commonPickerLoading: false, search: ''
    }
  },
  created() {
  },
  methods: {
    handleClickTableRow(row, event, column) {
      const rows = this.$refs.commonPickerTable.selection
      this.$refs.commonPickerTable.clearSelection()
      // 点击自身 去掉勾选
      if (!rows || rows.length === 0 || rows[0].id !== row.id) {
        this.$refs.commonPickerTable.toggleRowSelection(row)
      }
    },
    handleSelect(selection, row) {
      // 点击自身 去掉勾选
      if (selection && selection.length === 0) {
        this.$refs.commonPickerTable.clearSelection()
      } else {
        this.$refs.commonPickerTable.clearSelection()
        this.$refs.commonPickerTable.toggleRowSelection(selection[selection.length - 1])
      }
    }
  }
}
</script>
<style lang="scss">
.common-picker-table-container{
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}
</style>
